<script setup>
import { storeToRefs } from 'pinia';
import { useUrl } from '~~/composables/states';
useHead({
    title: 'HLS: Перераспределение',
})
const naryads_rasp = useNaryadListRasp();
const naryads = storeToRefs(naryads_rasp);
console.log(naryads.naryads.value);
console.log(naryads);
const one_etap_rasp = useOneEtapRasp();
const list_usl = useUslList();
const sort_by = ref('')
const naryad_search = ref('')

const urlHome = useUrl();

const mpp = useCookie('mpp');
const counter = useStoreCounter();
console.log("counter: ", counter);
const user = useCookie('user');
if (user.value == null) {
    navigateTo('/login');
}
const router = useRouter();

const modal_number_nar = ref('')
const modal_stu_nar = ref('')
const modal_patient_nar = ref('')


async function fnRasp15sec() {
    const { data: array_naryad } = await useFetch(urlHome.value + 'api/it_lab/?mpp=' + mpp.value + '&tech_st=True')
    console.log("stlist array_naryad: ", array_naryad);
    naryads_rasp.setArray(array_naryad._rawValue);
    console.log("stlist naryad_srasp getarray: ", naryads_rasp.getArray());
}
fnRasp15sec();

async function moveTo(id, sdl, index) {
    const { data: next_etap_status } = await useAsyncData('next_etap_status', () => $fetch(urlHome.value + 'naryad/next_etap/' + id + '/' + sdl + '/True' + '/' + mpp.value))
    if (next_etap_status._rawValue.status == 'ok') {
        naryads_rasp.removeAnElement(index);
    }
    if (next_etap_status._rawValue.status == 'exist') {
        alert('Такой этап уже есть');
        naryads_rasp.removeAnElement(index);
    }
    counter.counterMoveNaryadToOther();
}

function openModalUsl() {
    document.getElementById("my-modal-6").checked = true;
}

async function getUsl(idkv, nkv, stu, fam, im, ot) {
    const { data: usls } = await useAsyncData('usls', () => $fetch(urlHome.value + 'api/pl_uslp/?idkv=' + idkv));
    modal_number_nar.value = nkv;
    modal_stu_nar.value = stu;
    modal_patient_nar.value = fam + ' ' + im + ' ' + ot;
    console.log("usls: ", usls._rawValue);
    list_usl.value = usls._rawValue;
    openModalUsl();
    return;
}

function sortNaryadList(sortBy) {
    switch (sortBy) {
        case 'dnaz_etap_inc':
            naryads.naryads.value.sort(function (a, b) {
                return (new Date(a.dou)) - (new Date(b.dou));
            });
            break;
        case 'dnaz_etap_desc':
            naryads.naryads.value.sort(function (a, b) {
                return (new Date(b.dou)) - (new Date(a.dou));
            });
            break;
        case 'stu_inc':
            naryads.naryads.value.sort(function (a, b) {
                return a.stu - b.stu;
            });
            break;
        case 'stu_desc':
            naryads.naryads.value.sort(function (a, b) {
                return b.stu - a.stu;
            });
            break;
    }
    return;
}

function toNaryad(index, id) {
    console.log("toNaryad: ", naryads.naryads.value[index])
    one_etap_rasp.naryad.value = naryads.naryads.value[index];
    navigateTo('/lab/naryad_st/' + id);
}

function resetSearch() {
    naryad_search.value = '';
    sort_by.value = '';
}

</script>
<style>
.list-complete-item {
    transition: all 0.8s ease;
    display: inline-block;
    margin-right: 10px;
}

.list-complete-enter-from,
.list-complete-leave-to {
    opacity: 0;
    transform: translateY(30px);
}

.list-complete-leave-active {
    position: absolute;
}
</style>

<template>
    <div>
        <div class="px-2">
            <input type="text"
                class="input input-sm input-bordered mr-2 my-2 sm:my-0 md:my-0 lg:my-0 xl:my-0 2xl:my-0  max-w-sm"
                placeholder="Фамилия пациента" v-model="naryad_search">
            <select v-model="sort_by" @change="sortNaryadList(sort_by)"
                class="select select-bordered select-sm mr-2 my-2 sm:my-0 md:my-0 lg:my-0 xl:my-0 2xl:my-0">
                <option v-if="sort_by == ''" value="" selected>Сортировка</option>
                <option value="dnaz_etap_inc">Дата назначения этапа по возр.</option>
                <option value="dnaz_etap_desc">Дата назначения этапа по убыванию</option>
                <option value="stu_inc">Стоимость наряда по возрастанию</option>
                <option value="stu_desc">Стоимость наряда по убыванию</option>
            </select>
            <button v-if="naryad_search != '' || sort_by != ''" class="btn btn-sm" @click="resetSearch()">Очистить</button>
        </div>
        <transition-group name="list-complete" tag="div"
            class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-2 2xl:grid-cols-3">
            <div v-for="(item, index) in naryads.naryads.value" :key="item.id" class="list-complete-item">
                <div v-show="((item.patient.fam).toUpperCase()).includes((naryad_search).toUpperCase())">
                    <NaryadListWork>
                        <NaryadListGridOne>
                            <div class="tooltip" data-tip="Открыть наряд">
                                <div class="rounded mx-1 hover:bg-accent-focus" @click="toNaryad(index, item.id)"><b>{{
                                    item.nkv }}</b></div>
                            </div>
                        </NaryadListGridOne>
                        <NaryadListGridTwo>
                            <div>{{ item.naryad_doc.user_full.fam }} {{ item.naryad_doc.user_full.im[0] }}. {{
                                item.naryad_doc.user_full.ot[0] }}</div>
                        </NaryadListGridTwo>
                        <NaryadListGridOne>{{ ~~((new Date() - new Date(item.dnaz_etap)) / (1000 * 60 * 60 * 24)) }} / {{
                            ~~((new Date() - new Date(item.dou)) / (1000 * 60 * 60 * 24)) }}</NaryadListGridOne>
                        <NaryadListGridSeven>
                            {{ item.patient.fam }} {{ item.patient.im }} {{ item.patient.ot }}
                        </NaryadListGridSeven>
                        <NaryadListGridSix>
                            <div class="tooltip" data-tip="Список услуг">
                                <div class="rounded mx-1 hover:bg-accent-focus"
                                    @click="getUsl(item.idkv, item.nkv, item.stu.toLocaleString(), item.patient.fam, item.patient.im, item.patient.ot)">
                                    <b>{{ (item.stu).toLocaleString() }} ₽</b>
                                </div>
                            </div>
                        </NaryadListGridSix>
                        <NaryadListGridThree>
                            <div class="flex gap-4">
                                <div class="tooltip" data-tip="Распределить наряд">
                                    <div @click="toNaryad(index, item.id)" class="rounded mx-1 hover:bg-accent-focus">
                                        <NaryadListMoveRasp></NaryadListMoveRasp>
                                    </div>
                                </div>
                            </div>
                        </NaryadListGridThree>
                    </NaryadListWork>
                </div>
            </div>
        </transition-group>
        <Transition>
            <input type="checkbox" id="my-modal-6" class="modal-toggle" />
        </Transition>
        <Transition>
            <AppUsl>
                <div
                    class="grid grid-cols-1 sm:grid-cols-3 md:grid-cols-3 lg:grid-cols-3 xl:grid-cols-3 2xl:grid-cols-3 sm:flex md:flex lg:flex xl:flex 2xl:flex sm:gap-4">
                    <div class="text-2xl ">Наряд : <b>{{ modal_number_nar }}</b></div>
                    <div class="text-2xl ">Сумма : <b>{{ modal_stu_nar }} ₽</b></div>
                    <div class="text-1xl align-middle">Пациент : {{ modal_patient_nar }}</div>
                </div>
                <div class="overflow-x-auto relative">
                    <div class="flex flex-row w-full">
                        <div class="basis-1/4"><b>Код</b></div>
                        <div class="basis-1/4"><b>Кол-во</b></div>
                        <div class="basis-1/4"><b>Цена</b></div>
                        <div class="basis-1/4"><b>Сумма</b></div>
                    </div>
                    <hr>
                    <div v-for="(item, index) in list_usl.value" :key="item.kusl">
                        <div v-if="index % 2 == 0" class="">
                            <div class="flex flex-row w-full">
                                <div class="basis-1/4"><b>{{ item.kusl }}</b></div>
                                <div class="basis-1/4"><b>{{ item.kol }}</b></div>
                                <div class="basis-1/4"><b>{{ (item.price).toLocaleString() }} ₽</b></div>
                                <div class="basis-1/4"><b>{{ (item.stu).toLocaleString() }} ₽</b></div>
                            </div>

                            <div class="break-words">{{ item.nusl }}</div>
                        </div>
                        <div v-else>
                            <div class="flex flex-row w-full">
                                <div class="basis-1/4"><b>{{ item.kusl }}</b></div>
                                <div class="basis-1/4"><b>{{ item.kol }}</b></div>
                                <div class="basis-1/4"><b>{{ (item.price).toLocaleString() }} ₽</b></div>
                                <div class="basis-1/4"><b>{{ (item.stu).toLocaleString() }} ₽</b></div>
                            </div>
                            <div class="break-words">{{ item.nusl }}</div>
                        </div>
                        <hr>
                    </div>
                </div>
            </AppUsl>
        </Transition>
    </div>
</template>
